<template>
    <div class="conect-product" :status="linked ? 'linked' : 'unlink'">

        <h2>Products</h2>

        <!-- loading -->
        <div class="scroll-init" v-if="!inited">
            <UxLoading2 />
        </div>

        <!-- 查看商品绑定列表，且没有绑定时显示 -->
        <div class="scroll-nodata" v-else-if="linked && detail.sync_count == 0">
            <svg-icon name="user-template" />
            <span>No linked product template found.</span>
            <button type="primary" @click="reInit('unlink')">Link</button>
        </div>

        <template v-else>
            <div class="select-tab">
                <a :class="{ active: form.shop_id == 0 }" @click="setTab(0)">
                    <img src="@/assets/images/store/store-tabs-self.png" alt="">
                    <span>Product templates</span>
                </a>
                <a v-for="item in storeList" :key="item.id" @click="setTab(item.id)" :class="{ active: form.shop_id == item.id }">
                    <StoreIconName :item="item"></StoreIconName>
                </a>
            </div>

            <div class="select-search">
                <UserSearchName shape="solid" v-model="form.name" placeholder="Template" @change="doSearch($event)" />
            </div>

            <div class="table-title" :class="{border: scroll_top>0}">
                <span>Template</span>
                <span>Product information</span>
                <span>Designs</span>
                <span>Price</span>
                <span>Link</span>
            </div>

            <div class="table-scroller" ref="scrollbar" @scroll="onScroll($event)">

                <template v-if="table.length == 0">

                    <UxSearchEmpty v-if="request && request.name" />
                    <div class="scroll-nodata" v-else-if="linked">
                        <svg-icon name="user-template" />
                        <span v-if="type == 'hangtag'">You haven't linked any products to this hang tag.</span>
                        <span v-if="type == 'package'">You haven't linked any products to this packaging bag.</span>
                        <button type="primary" @click="reInit('unlink')">Link</button>
                    </div>

                    <div class="scroll-nodata" v-else-if="form.shop_id">
                        <svg-icon name="user-shop" />
                        <span>You haven't published any products to this store.</span>
                        <button type="primary" @click="$router.push('/user/store?shop_id='+form.shop_id)">Publish a product</button>
                    </div>

                    <div class="scroll-nodata" v-else>
                        <svg-icon name="user-template" />
                        <strong>No product template available</strong>
                        <span>Unleash your creativity and design one-of-a-kind branded apparel.</span>
                        <button type="primary" @click="newTemplate()">Create product template</button>
                    </div>

                </template>

                <ul class="table-body" v-if="table.length > 0">
                    <li v-for="item in table" :key="item.id" :class="{'table-brand': item.tag_design_info || item.pack_design_info}" v-loading="item.loading">
                        <div class="table-model">
                            <CommonStoreTemplatePreview v-if="item.source == 'shop'" :item="item" />
                            <CommonTemplatePreview v-else :pieces="item.design_list" :models="item.model_img" :baseColor="getColorPreview(item)" />
                            <h3 v-text="item.title"></h3>
                        </div>

                        <div class="table-info" :suit="item.data.length > 1">
                            <div class="table-info-pro" v-for="product in item.data" :key="item.id + '-' + product.design_id">
                                <div class="table-info-select">
                                    <div class="table-info-title" v-text="product.sub_title"></div>
                                    <div class="table-info-color">
                                        <em v-for="color in product.color_list" :key="color.color_id" :style="{backgroundColor: color.color_num}"></em>
                                    </div>

                                    <div class="table-info-size">
                                        <em v-if="product.size_list.length  == 0"> -- </em>
                                        <em v-else-if="product.size_list.length  == 1" v-text="product.size_list[0].size_name"></em>
                                        <em v-else v-text="product.size_list[0].size_name + '-' +product.size_list[product.size_list.length-1].size_name"></em>
                                    </div>
                                </div>

                                <div class="table-info-design">
                                    <p v-if="!product.design_info || product.design_info.length == 0">- -</p>
                                    <CommonSurfacePreview v-else :design="product.design_info" />
                                </div>

                                <div class="table-info-cost">
                                    <CommonLevelDiscount v-if="product.low_price == product.high_price" :level="item" :price="product.low_price + product.extra_price" :blank="product.is_blank" type="unit|discount|icon" />
                                    <CommonLevelDiscount v-else :level="item" :price="(product.low_price + product.extra_price) +'-'+ (product.high_price + product.extra_price)" :blank="product.is_blank" type="unit|discount|icon" />
                                </div>
                            </div>
                        </div>

                        <div class="table-switch">
                            <div class="product-switch" @click="setBind(item)" :class="{active:item.bind}"></div>
                        </div>

                        <CommonBrandPreview :tag="item.tag_design_info" :pack="item.pack_design_info" />
                    </li>

                </ul>

                <div class="scroll-status">
                    <span v-show="loadmore == 'loading'">loading</span>
                    <span v-show="loadmore == 'nomore'"> </span>
                    <span v-show="loadmore == 'waiting'">scroll to bottom load more</span>
                </div>

            </div>

            <UxLoading2 :loading="loading" />

        </template>

        <!-- 绑定与解除绑定弹窗 -->
        <BrandingBindProductNotify :option="bindInfo.option" v-if="bindInfo" @close="bindInfo.close($event)" @success="bindInfo.success($event)" />

    </div>
</template>
<script>
export default {
    name: "ConnectProduct",
    props: {
        detail: { type: Object, default: () => { return null } },
        type: { type: String, default: '' },
        filter: { type: String, default: 'unlink' }
    },
    data () {
        return {
            inited: false,
            loading: false,
            loadmore: null, // [loading|nomore|waiting];
            linked: false,
            scroll_top: 0,
            form: {
                name: '',
                shop_id: "",
                page_num: 1,
                page_size: 10,
                total: 0,
            },
            request: null,
            table: [],
            storeList: [],
            bindInfo: null,
        };
    },
    computed: {
        keyname () {
            return {
                'hangtag': 'tag_design_id',
                'package': 'pack_design_id',
            }[this.type];
        }
    },
    methods: {
        //获得全部店铺
        async getStore () {
            const response = await this.$http("UserStore.getAllLinkStore");
            this.storeList = response.data || [];
        },

        // 获取列表数据
        async getData () {

            const shop_id = this.form.shop_id;
            const keyname = {
                'hangtag': 'tag_design_id',
                'package': 'pack_design_id',
            }[this.type];

            const request = {
                name: this.form.name,
                page_num: this.form.page_num,
                page_size: this.form.page_size,
                // brand_state: this.linked ? 1 : 2,
                brand_state: this.linked ? 1 : 0, // 1已绑定的，2未绑定的，0不筛选
                [keyname]: this.detail.id,
            };


            const callback = (response, table, total, type) => {
                if (response.code === 0) {

                    if (request.page_num == 1) {
                        // 第一页清空
                        this.table.splice(0, this.table.length);
                    }


                    table.map((item) => {

                        if (type == 'temp') {


                            this.table.push({

                                id: item.id,
                                source: 'template',
                                tag_design_info: item.tag_design_info,
                                pack_design_info: item.pack_design_info,
                                tag_design_id: item.tag_design_id,
                                pack_design_id: item.pack_design_id,
                                img_url: item.tem_img_url,
                                title: item.template_name,
                                color_base: item.color_base || item.show_color_num || '',
                                color_list: item.color_list || [],
                                model_img: item.model_img || [],
                                user_level: item.user_level,
                                user_discount: item.user_discount,
                                loading: false,
                                bind: item[this.keyname] && item[this.keyname] == this.detail.id,
                                design_list: item.design_list || [],
                                data: [{
                                    spu: item.spu,
                                    title: item.title,
                                    model_img: item.model_img,
                                    design_id: item.id,
                                    color_base: item.color_base,
                                    size_list: item.size_list || [],
                                    color_list: item.color_list || [],
                                    design_info: item.design_list || [],
                                    low_price: item.low_price || 0,
                                    high_price: item.high_price || 0,
                                    extra_price: item.extra_price,
                                    is_blank: !!item.is_blank,
                                }],
                            })

                        } else {

                            const custom = (item.data || []).filter(p => (p.design_info || []).filter(i => i.custom_count > 0).length);
                            item.custom = custom.length > 0;
                            item.source = 'shop';
                            item.loading = false;
                            item.bind = item[this.keyname] && item[this.keyname] == this.detail.id;
                            this.table.push(item)
                        }

                    });

                    this.request = request;
                    this.form.total = total;
                    this.loadmore = this.table.length >= total ? "nomore" : "waiting";
                } else {
                    this.loadmore = 'error';
                }
            }

            if (shop_id) {
                // 获取店铺
                const res = await this.$http("UserStore.getShopProductListSuit/" + shop_id, request);
                const table = (res.data || {}).product_info || [];
                const total = (res.data || {}).total || 0;
                callback(res, table, total, 'shop');

            } else {
                const res = await this.$http("storeTemplate.getList", request);
                const table = res.data || [];
                const total = res.total || 0;
                callback(res, table, total, 'temp');
            }
        },

        getColorPreview (item) {
            const color = item.color_base;
            const list = item.color_list || [];
            const select = list.filter((i) => i.color_num == color || i.color_id == color);
            return select[0] || list[0];
        },

        // 清空数据
        setTab (id) {
            if (this.loading) {
                return;
            }
            if (this.form.shop_id == id) {
                // 相同
            } else {
                // 更新
                this.form.shop_id = id;
                this.form.page_num = 1;
                this.form.name = ''
                this.loading = true;
                this.getData().then(res => {
                    this.loading = false;
                    this.$refs.scrollbar && (this.$refs.scrollbar.scrollTop = 0)
                });
            }
        },

        // 对话框显示时
        onShow () {
            if (this.table.length == 0) {
                this.getData();
            }
            this.storeList.length == 0 && this.type != 'store' && this.getStore();
        },

        doSearch () {
            if (!this.loading) {
                this.form.page_num = 1;
                this.loading = true;
                this.loadmore = "waiting";
                this.getData().then(res => this.loading = false);
            }
        },

        // 关闭
        onClose () {
            this.$emit("input", false);
        },

        // 滚动事件
        onScroll (event) {

            let elem = event.target;
            let offset = 100;
            let scrollHeight = elem.scrollHeight;
            let scrollTop = elem.scrollTop;

            this.scroll_top = scrollTop;

            if (this.loadmore != "nomore") {
                let clientHeight = elem.innerHeight || elem.clientHeight;

                if (scrollHeight - clientHeight - scrollTop < offset) {
                    if (this.loadmore != "loading") {
                        this.loadmore = "loading";
                        this.form.page_num += 1;
                        this.getData();

                    }
                }
            }
        },

        // 价格格式化
        getPriceFixed (price) {
            return (price * 0.01).toFixed(2);
        },

        // 修改绑定
        setBind (item) {

            const type = {
                'hangtag': 'tag',
                'package': 'pack',
            }[this.type];


            item.loading = true;
            this.bindInfo = {
                option: {
                    product: item,
                    brand: item.bind ? null : this.detail,
                    source: item.source,
                    type: type,
                },
                success: (product) => {

                    const bindName = { tag: 'tag_design_id', pack: 'pack_design_id' }[type];
                    const infoName = { tag: 'tag_design_info', pack: 'pack_design_info' }[type];

                    this.$set(item, bindName, item.bind ? 0 : this.detail.id);
                    this.$set(item, infoName, item.bind ? null : this.detail);
                    this.$set(item, 'bind', item[this.keyname] && item[this.keyname] == this.detail.id);
                    this.$emit('update')
                    item.loading = false;
                    this.bindInfo = null;
                },
                close: () => {
                    this.bindInfo = null;
                    item.loading = false;
                }
            }


        },

        newTemplate () {
            this.$emit('global:productDialogOpen')
        },

        reInit (filter) {
            this.linked = filter == 'linked';
            this.inited = false;

            if (!this.detail.id) {
                this.inited = true;
            } else if (this.linked && this.detail.sync_count == 0) {
                // 查找已绑定的，但是没有数据
                this.inited = true;
            } else {
                Promise.all([this.getData(), this.getStore()]).then(res => {
                    this.inited = true;
                })
            }
        },
    },
    created () {
        this.reInit(this.filter);
    },
};
</script>
<style lang="scss" scoped>
.conect-product {
    box-sizing: border-box;
    width: calc(100vw - 80px);
    height: calc(100vh - 80px);
    max-width: 1096px;
    max-height: 800px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;

    & > h2 {
        font-size: 26px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #000000;
        line-height: 32px;
        padding: 24px 32px;
    }

    .loading {
        border-radius: 10px;
    }

    &[status='linked'] {
        .table tr.table-brand {
            .table-info,
            .table-design,
            .table-cost {
                padding-bottom: 12px;
            }
            & + tr td {
                display: none;
            }
        }
    }
}
// .select-tab {
//     display: flex;
//     box-sizing: border-box;
//     padding: 9px 12px;
//     flex-wrap: wrap;
//     a {
//         height: 36px;
//         border-radius: 36px;
//         cursor: pointer;
//         box-sizing: border-box;
//         padding: 0 14px 0 12px;
//         display: flex;
//         align-items: center;
//         justify-content: center;
//         font-size: 14px;
//         font-family: Roboto-Medium, Roboto;
//         font-weight: 500;
//         color: #000000;
//         margin: 9px 4px;
//         & > span {
//             display: flex;
//             align-items: center;
//         }

//         i {
//             width: 18px;
//             height: 18px;
//             line-height: 18px;
//             margin-right: 4px;
//             text-align: center;
//             font-size: 20px;
//             color: #ea4c89;
//         }

//         .shop-name {
//             &::v-deep figure {
//                 width: 18px;
//                 height: 18px;
//                 margin-right: 4px;
//             }
//         }

//         &:hover {
//             background: #f6f6f6;
//         }
//         &.active {
//             background: #f0f0f0;
//             cursor: default;
//         }
//     }
// }

.select-tab {
    display: flex;
    box-sizing: border-box;
    margin-top: -8px;
    padding: 0 28px;
    flex-wrap: wrap;
    a {
        width: 252px;
        height: 40px;
        box-sizing: border-box;
        padding: 0 14px 0 12px;
        background: #ffffff;
        border-radius: 8px;
        border: 1px solid #e6e6e6;
        cursor: pointer;
        display: flex;
        align-items: center;
        position: relative;
        overflow: hidden;
        margin: 4px;

        & > img {
            width: 20px;
            height: 20px;
            margin-right: 4px;
        }

        & > span {
            display: flex;
            align-items: center;
            color: #000000;
            font-size: 14px;
            font-family: Roboto-Regular, Roboto;
            em {
                font-size: 14px;
                font-family: Roboto-Regular, Roboto;
                font-weight: 400;
                color: #000000;
                line-height: 16px;
            }

            img {
                width: 20px;
                height: 20px;
                line-height: 18px;
                margin-right: 4px;
                text-align: center;
                font-size: 20px;
                color: #ea4c89;
            }
        }

        &::before {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            right: 0px;
            height: 2px;
            background: transparent;
            transition: all 0.2s;
        }

        &:hover {
            &::before {
                background-color: #f6b2cd;
            }
        }

        &.active {
            &::before {
                background-color: #ea4c89;
            }

            &.error::before {
                background-color: #db080d;
            }
        }
    }
}

.select-search {
    position: relative;
    padding: 16px 32px 20px;
    .user-search-name {
        height: 36px;
        width: 252px;
    }
}

// .select-search {
//     position: relative;
//     padding: 0 16px 18px;

//     label {
//         display: inline-block;
//         position: relative;
//         vertical-align: top;
//         width: 100%;
//         max-width: 320px;
//         input {
//             border-radius: 6px;
//         }
//         svg {
//             position: absolute;
//             right: 8px;
//             top: 50%;
//             width: 26px;
//             height: 26px;
//             line-height: 40px;
//             text-align: center;
//             transform: translateY(-50%);
//             fill: #919191;
//             cursor: pointer;
//             &:hover {
//                 fill: #ea4c89;
//             }
//         }
//     }
// }

.table-scroller {
    flex: 1;
    overflow: auto;
    padding: 0 32px 32px;
    margin-top: 12px;
}

.table-title {
    display: flex;
    align-items: center;
    margin: 0 32px;
    border-radius: 8px;
    border: 1px solid #e6e6e6;
    height: 40px;
    min-height: 40px;
    position: relative;

    span {
        width: 20%;
        text-align: center;
        font-size: 14px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #292929;
        line-height: 20px;
        &:nth-child(1) {
            width: 22.4%;
        }
        &:nth-child(2) {
            width: 21.3%;
        }
        &:nth-child(3) {
            width: 18.7%;
        }
        &:nth-child(4) {
            width: 18.7%;
        }
        &:nth-child(5) {
            width: 18.9%;
        }
    }

    &::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        margin-top: 12px;
        height: 1px;
        background-color: #e6e6e6;
        z-index: 1;
        opacity: 0;
    }

    &.border::after {
        opacity: 1;
    }
}

.table-body {
    // & > li {
    //     display: flex;
    //     align-items: center;
    //     position: relative;
    //     cursor: pointer;

    //     & + li {
    //         border-top: 1px solid #dcdcdc;
    //     }
    //     &:hover {
    //         background: #fafafa;
    //     }
    // }

    // & > li.table-brand {
    //     & > .table-info,
    //     & > .table-async {
    //         margin-bottom: 48px;
    //     }
    // }

    & > li {
        display: flex;
        align-items: center;
        position: relative;
        border-radius: 8px;
        border: 1px solid #e6e6e6;
        margin-bottom: 12px;

        &.table-brand {
            padding-bottom: 40px;
        }
    }

    .table-model {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 12px;
        width: 22.4%;
        position: relative;
        box-sizing: border-box;
        .template-preview,
        .store-preview {
            width: 160px;
            margin: 0 auto;
            position: initial;

            &::v-deep .process-icon {
                left: 10px;
                top: 10px;
            }
        }

        h3 {
            font-size: 14px;
            color: #666666;
            margin: 8px auto 0;
            text-align: center;
            display: inline-block;
            max-width: 160px;
            box-sizing: border-box;
            vertical-align: top;
            line-height: 18px;
            word-break: break-word;
            max-height: 36px;
            overflow: hidden;
            position: relative;
            font-weight: normal;

            line-clamp: 2;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
        }
    }

    .table-info {
        flex-direction: column;
        align-items: center;
        width: 58.7%;
        .table-info-pro {
            width: 100%;
            display: flex;
            align-items: center;
            font-size: 14px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            color: #000000;
            line-height: 16px;
            word-break: break-word;

            & + .table-info-pro {
                border-top: 1px solid #ebebeb;
            }
        }

        .table-info-select {
            width: 33.33%;
            padding: 12px 24px;
            box-sizing: border-box;
        }

        .table-info-design {
            width: 33.33%;
            padding: 12px;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .table-info-cost {
            width: 33.33%;
            padding: 12px;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            align-items: center;

            .level-discount {
                font-size: 14px;
                justify-content: center;
                &[currency='JPY'] {
                    flex-wrap: wrap;
                    &::v-deep span {
                        margin: 0;
                        &[name='discount'] {
                            width: 100%;
                            margin: 4px;
                            text-align: center;
                        }
                    }
                }
            }
        }

        .table-info-title {
            padding-bottom: 10px;
            display: none;
        }

        .table-info-color {
            position: relative;
            display: flex;
            flex-wrap: wrap;
            padding-left: 46px;
            padding-bottom: 10px;
            line-height: 16px;
            &::before {
                content: 'Color:';
                position: absolute;
                left: 0;
                top: 0;
            }
            & > em {
                margin: 2px;
                width: 12px;
                height: 12px;
                box-sizing: border-box;
                border-radius: 1px;
                border: 1px solid rgba(0, 0, 0, 0.16);
            }
        }

        .table-info-size {
            position: relative;
            display: flex;
            flex-wrap: wrap;
            padding-left: 48px;
            line-height: 16px;
            &::before {
                content: 'Size:';
                position: absolute;
                left: 0;
                top: 0;
            }
            & > em {
                line-height: 16px;
            }
        }

        // 套装
        &[suit] {
            .table-info-title {
                display: block;
            }

            .table-info-pro:first-child {
                padding-top: 20px;
            }
            .table-info-pro:last-child {
                padding-bottom: 20px;
            }
        }
    }

    .table-cost {
        font-size: 14px;
        color: #000000;
        line-height: 16px;
        .level-discount {
            font-size: 14px;
        }
    }

    .table-switch {
        width: 18.9%;
        display: flex;
        justify-content: center;
        align-items: center;
        .product-switch {
            display: inline-block;
            position: relative;
            width: 40px;
            height: 22px;
            background: #c6c6c6;
            border-radius: 22px;
            cursor: pointer;

            &:before {
                content: '';
                position: absolute;
                left: 2px;
                top: 2px;
                width: 18px;
                height: 18px;
                border-radius: 18px;
                background: #fff;
                transition: all 0.2s ease;
            }
            &.active {
                border-color: #ea4c89;
                background-color: #ea4c89;
                &:before {
                    left: 20px;
                }
            }
        }
    }

    .brand-preview {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        cursor: default;
        border-top: 1px solid #e6e6e6;
    }
}

/*
.table {
    flex: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;

    // .scrollbar {
    //     width: 100%;
    //     overflow-y: auto;
    //     display: flex;
    //     flex-direction: column;
    //     box-sizing: border-box;
    //     padding: 0 16px 16px;
    //     min-height: 100%;
    // }

    // .table-title {
    //     display: flex;
    //     span {
    //         background: #f0f0f0;
    //         text-align: center;
    //         padding: 0;
    //         height: 32px;
    //         line-height: 32px;
    //         font-size: 14px;
    //         position: relative;
    //         color: #000;

    //         &:nth-child(1) {
    //             width: 22.4%;
    //         }
    //         &:nth-child(2) {
    //             width: 21.3%;
    //         }
    //         &:nth-child(3) {
    //             width: 18.7%;
    //         }
    //         &:nth-child(4) {
    //             width: 18.7%;
    //         }
    //         &:nth-child(5) {
    //             width: 18.9%;
    //         }

    //         &:first-child {
    //             border-top-left-radius: 4px;
    //             border-bottom-left-radius: 4px;
    //         }

    //         &:last-child {
    //             border-top-right-radius: 4px;
    //             border-bottom-right-radius: 4px;
    //         }
    //     }
    // }

    // .table-model {
    //     .template-preview {
    //         width: 160px;
    //         margin: 0 auto;
    //     }
    //     figure {
    //         margin: 0 auto;
    //         width: 160px;
    //         height: 160px;

    //         img {
    //             width: 100%;
    //             height: 100%;
    //             &[lazy='error'],
    //             &[lazy='loading'] {
    //                 background-color: transparent !important;
    //             }
    //         }
    //     }
    //     h3 {
    //         margin: 4px auto 0;
    //         display: inline-block;
    //         max-width: 160px;
    //         box-sizing: border-box;
    //         vertical-align: top;
    //         line-height: 18px;
    //         word-break: break-word;
    //         max-height: 36px;
    //         overflow: hidden;
    //         position: relative;
    //         font-weight: normal;

    //         line-clamp: 2;
    //         display: -webkit-box;
    //         -webkit-box-orient: vertical;
    //         text-overflow: ellipsis;
    //         -webkit-line-clamp: 2;
    //     }
    // }
}
*/

.scroll-init {
    flex: 1;
    .loading {
        border-radius: 10px;
    }
}

.scroll-nodata {
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    svg {
        width: 80px;
        height: 80px;
        box-sizing: border-box;
        padding: 16px;
        background: #f0f0f0;
        border-radius: 80px;
    }

    strong {
        margin-top: 16px;
        font-size: 16px;
        font-family: Arial-BoldMT, Arial;
        font-weight: normal;
        color: #000000;
        line-height: 24px;

        & + span {
            margin-top: 4px;
        }
    }

    span {
        margin: 20px;
        font-size: 14px;
        color: #555555;
        line-height: 18px;
    }
    button {
        width: 200px;
        font-size: 14px;
    }
}

.scroll-status {
    text-align: center;
    line-height: 50px;
    text-align: center;
    font-size: 14px;

    color: #666666;
}
</style>
